<template>
  <div class="PostAddView">
    <div style="width: 80%; margin: 0 auto; margin-top: 6vh">
      <a-card title="新建帖子" hoverable>
        <template #extra>
          <a-link>More</a-link>
        </template>
        <a-form :model="form" style="width: 100%" layout="inline">
          <a-form-item field="标题" tooltip="" label="标题">
            <a-input v-model="form.title" placeholder="请输入文章题目" />
          </a-form-item>
          <a-form-item field="post" label="题号">
            <a-input v-model="form.questionId" />
          </a-form-item>
          <a-form-item field="post" label="标签">
            <a-input-tag
              v-model="form.tags"
              placeholder="请输入标签"
              :max-tag-count="3"
              allow-clear
            />
          </a-form-item>
          <a-form-item field="post" label="题目名称">
            <a-input v-model="form.questionTitle" />
          </a-form-item>
          <a-form-item field="isRead" label="文章图片">
            <a-input v-model="form.imgUrl" />
          </a-form-item>
          <a-form-item label="文章内容：">
            <MdEdit :value="form.content" :handleChange="onChange" />
          </a-form-item>
        </a-form>
        <a-form-item style="margin: 0 auto">
          <a-button
            @click="handleSubmit"
            type="primary"
            :size="'large'"
            style="margin: 0 auto"
            >提交</a-button
          >
        </a-form-item>
      </a-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { PostAddRequest, PostControllerService } from "../../../generated";
import MdEdit from "@/components/MdEdit.vue";
import message from "@arco-design/web-vue/es/message";
import { useRouter } from "vue-router";

const form = ref({} as PostAddRequest);
const router = useRouter();

const onChange = (v: string) => {
  form.value.content = v;
};

const handleSubmit = async () => {
  const res = await PostControllerService.addPostUsingPost(
    form.value as PostAddRequest
  );
  if (res.code === 0) {
    message.success("提交成功");
    router.push({
      path: "/post/list/view/",
    });
  } else {
    message.error("提交失败" + res.message);
  }
};
</script>

<style scoped>
.card-demo {
  width: 360px;
  margin-left: 24px;
  transition-property: all;
}
.card-demo:hover {
  transform: translateY(-4px);
}
</style>
